<template>
    <div class="container">
        <MostHeader />

        <div class="main">
            <h1>发布职位</h1>

            <div class="basic">
                <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" class="form" ref="formRef">
                    <h2 style="position: relative; left: -9vw;">1 职位基本类型</h2>
                    <div style="font-size: 12px; position: relative; left: -8vw; margin-bottom: 25px;">
                        职位成功发布后，招聘类型、职位名称、职位类型、工作城市，将无法修改
                    </div>
                    <a-form-item label="公司">
                        <a-input v-model:value="formState.comName" :bordered="false" disabled />
                    </a-form-item>
                    <a-form-item label="招聘类型">
                        <a-radio-group v-model:value="formState.type">
                            <a-radio value="1">应届校园招聘</a-radio>
                            <a-radio value="2">实习生招聘</a-radio>
                            <a-radio value="3">兼职招聘</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="职位名称">
                        <a-input v-model:value="formState.jobName" />
                    </a-form-item>
                    <a-form-item label="职位描述">
                        <a-textarea v-model:value="formState.desc" />
                    </a-form-item>
                    <a-form-item label="职位类型">
                        <a-input v-model:value="formState.jobType" />
                    </a-form-item>

                    <h2 style="position: relative; left: -9vw;">2 职位要求</h2>
                    <div style="font-size: 12px; position: relative; left: -8vw; margin-bottom: 25px;">
                        我们将通过以下条件，为您精确推荐合适的牛人，请尽量详细编写
                    </div>
                    <a-form-item label="经验和学历">
                        <a-select v-model:value="formState.experience" style="width: 150px" placeholder="选择经验"
                            :options="experienceOpts.map(item => ({ value: item }))">
                        </a-select>
                        <a-select v-model:value="formState.edu" style="width: 150px; margin-left: 15px;"
                            placeholder="选择学历" :options="eduOpts.map(item => ({ value: item }))">
                        </a-select>
                    </a-form-item>
                    <a-form-item label="薪资范围">
                        <a-select v-model:value="formState.salary" style="width: 150px;" placeholder="选择薪资范围"
                            :options="salaryOpts.map(item => ({ value: item }))">
                        </a-select>
                    </a-form-item>
                    <a-form-item label="职位关键词">
                        <a-tag v-for="tag in tags" closable class="tag">{{ tag }}</a-tag>
                        <a-input-search v-model:value="newTag" enter-button="添加" size="small" @search="addTag"
                            style="width: 120px;" />
                    </a-form-item>
                    <a-form-item label="工作地点">
                        <a-input v-model:value="formState.loc" />
                        <span style="font-size: 12px; color: grey;">请填写真实有效地址，若查实造假，将受到平台处罚</span>
                    </a-form-item>

                    <a-form-item :wrapper-col="{ span: 16, offset: 12 }">
                        <a-button type="primary" @click="onSubmit">发布</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import MostHeader from '@/components/MostHeader.vue';
import { reactive, toRaw, ref } from 'vue';

const formState = reactive({
    comName: '该账号所属公司名称',
    type: '',
    jobName: '',
    desc: '',
    jobType: '',
    experience: '',
    edu: '',
    salary: '',
    loc: ''
});
const onSubmit = () => {
    console.log('submit!', toRaw(formState));
};
const labelCol = {
    style: {
        width: '150px',
    },
};
const wrapperCol = {
    span: 16,
};

const experienceOpts = ['不限', '在校生', '应届生', '1年以内', '1-3年', '3-5年', '5-10年', '10年以上']
const eduOpts = ['不限', '初中及以下', '中专/中技', '高中', '大专', '本科', '硕士', '博士']
const salaryOpts = ['不限', '3k以下', '3-5k', '5-10k', '10-20k', '20-50k', '50k以上']

const tags = ref([])
const newTag = ref('')
const addTag = () => {
    if (newTag.value != '') {
        tags.value.push(newTag.value)
        newTag.value = ''
    }
}
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f6fa;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    padding-top: 10px;
    width: 80%;
    background-color: white;
    margin-bottom: 20px;

    border-radius: 10px;
}

.form {
    margin-top: 5px;
    position: relative;
    left: -3vw;
}
</style>